<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<title></title>
	</head>
	<body>
		<div id="box">
			<el-input  placeholder="请输入搜索用户" style="width: 200px;"></el-input>
			<el-button type="primary" size="mini">搜索</el-button>
			<el-button type="success" size="mini" type="text" @click="openAdd">添加用户</el-button>
			
			<template>
			  <el-table
				size="mini"
			    :data="userlist"
			    border
			    style="width: 100%">
			    <el-table-column
			      prop="id"
			      label="id"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      prop="uname"
			      label="uname"
			      width="180">
			    </el-table-column>
			    <el-table-column
			      label="upwd">
				  <template slot-scope="scope" >
				  	*******
				  </template>	
			    </el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope" >
						<el-button type="success" size="mini" type="text" @click="upd(scope.row)">编辑</el-button>
						<el-button type="success" size="mini" type="text" @click="open(scope.row)">编辑角色</el-button>
						<el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
					</template>	
				</el-table-column>
			  </el-table>
			</template>
			
			
			<el-dialog title="增加用户" :visible.sync="dialogFormVisible">
			  <el-form :model="formAdd">
			    <el-form-item label="用户名" label-width="80px">
			      <el-input v-model="formAdd.uname" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="密码" label-width="80px">
				  <el-input v-model="formAdd.upwd" autocomplete="off"></el-input>
				</el-form-item>
				</el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible2">
			  <el-form :model="formUpd">
			    <el-form-item label="用户名" label-width="80px">
			      <el-input v-model="formUpd.uname" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="密码" label-width="80px">
				  <el-input v-model="formUpd.upwd" autocomplete="off"></el-input>
				</el-form-item>
				
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
			    <el-button type="primary" @click="updSubmit">确 定</el-button>
			  </div>
			</el-dialog>
			
			<el-drawer title="角色菜单维护" :visible.sync="drawer" :with-header="true">
				当前用户角色：
				<el-button round size="mini" @click="deleteRole(tag.id)" v-for="tag in userRoleList">
					{{tag.description}}
					<i class="el-icon-minus"></i>
				</el-button>
				<hr />
				所有角色：
				<el-button round size="mini" v-for="tag in roleList" @click="addRole(tag.id,tag.description)">
					{{tag.description}}
					<i class="el-icon-plus"></i>
				</el-button>
			</el-drawer>
			
		</div>
	</body>
	<script>
		new Vue({
			el:"#box",
			data:{
				drawer:false,
				nowUserId:0,
				userRoleList:[],//当前用户拥有的角色集合
				dialogFormVisible:false,
				dialogFormVisible2:false,
				userlist:[],
				roleList:[],
				formAdd:{
					uname:"",
					upwd:""
				},
				formUpd:{
					uname:"",
					upwd:""
				},
			},
			methods:{
				initList(){
					axios.get(API+"allUser").then(res=> {
							console.log(res.data)
							this.userlist=res.data.data.list
							console.log(res.data.data.list)
						}).catch(err => {
						console.log(err)
					});
					
				},
				allRoleList(){
					axios.get(API+"allRole").then(res=> {
							console.log(res.data)
							this.roleList=res.data.data.list
							console.log(res.data.data.list)
						}).catch(err => {
						console.log(err)
					});
				},
				openChild(id){
					//this.formAdd.parentid=id
					this.dialogFormVisible=true
					//console.log(id)
				},
				openAdd(){
					this.dialogFormVisible=true
				},
				open(row){
					this.drawer=true
					this.nowUserId=row.id
					axios.get(API+"selectRoleByUserId/"+this.nowUserId).then(res=> {
							this.userRoleList=res.data.data.roleList
						}).catch(err => {
						console.log(err)
					});
				},
				deleteRole(id){
					// alert("角色id："+id)
					axios.post(API+"deleteByUserIdAndRoleId",{
						roleid:id,
						userid:this.nowUserId
					}).then(res=> {
							if(res.data.code==200){
								this.userRoleList=this.userRoleList.filter(function(item){
									return item.id !== id
								})
							}
						}).catch(err => {
						console.log(err)
					});
				},
				addRole(id,description){
					let that=this
					console.log(this.nowUserId)
					if(this.userRoleList.length>0){
						let flag=this.userRoleList.filter(function(item){
							return item.id !== id
						})
						if(flag.length!==that.userRoleList.length){
							alert("已存在")
						}else{
							axios.post(API+"addByUserIdAndRoleId",{
								roleid:id,
								userid:that.nowUserId
							}).then(res=> {
									if(res.data.code==200){
										that.userRoleList.push({"id":id,"description":description})
									}
								}).catch(err => {
								console.log(err)
							});
						}

					}else{
						axios.post(API+"addByUserIdAndRoleId",{
							roleid:id,
							userid:that.nowUserId
						}).then(res=> {
								if(res.data.code==200){
									that.userRoleList.push({"id":id,"description":description})
								}
							}).catch(err => {
							console.log(err)
						});
					}
				},
				addSubmit(){
					console.log(this.formAdd)
					axios.post(API+"addUser",this.formAdd).then(res=> {
							alert(res.data)
							this.dialogFormVisible=false
							this.formAdd={
								uname:"",
								upwd:""
							}
							this.initList()
						}).catch(err => {
						console.log(err)
					});
				},
				upd(row){
					this.dialogFormVisible2=true
					this.formUpd=row
					//console.log(this.formUpd)
				},
				updSubmit(){
					axios.post(API+"updUser",this.formUpd).then(res=> {
							alert(res.data)
							console.log(this.formUpd)
							this.dialogFormVisible2=false
						}).catch(err => {
						console.log(err)
					});
				},
				del(id){
					if(confirm("是否删除当前用户？")){
						axios.get(API+"delUser?id="+id).then(res=> {
								alert(res.data)
								this.initList()
							}).catch(err => {
							console.log(err)
						});
					}
				},
			},
			mounted() {
				this.initList()
				this.allRoleList()
			}
		})
	</script>
</html>